<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyOrder</title>
    <link rel="StyleSheet" href="../css/account.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
<!--    <script src="https://kit.fontawesome.com/58cb2985af.js" crossorigin="anonymous"></script>-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div th:replace="common/top"></div>

    <div id="w">

        <div id="topNavContent">
            <form>
                <label class="radio_label">
                    <div class="radio_option" id="allContent">
                        <input type="radio" name="status" value="0" id="all" > 全部订单
                    </div>
                </label>
                <label class="radio_label">
                    <div class="radio_option" id="unPayContent">
                        <input type="radio" name="status" value="1" id="unPay"> 待 付 款
                    </div>
                </label>
                <label class="radio_label">
                    <div class="radio_option" id="unShipContent">
                        <input type="radio" name="status" value="unshipped" id="unShip"> 待 发 货
                    </div>
                </label>
<!--                <label><input type="radio" name="status" value="shipped"> 已发货</label>-->
                <label class="radio_label">
                    <div class="radio_option" id="unGetContent">
                        <input type="radio" name="status" value="unreceived" id="unGet"> 待 收 货
                    </div>
                </label>
<!--                <label><input type="radio" name="status" value="received"> 已收货</label>-->
            </form>
        </div>
        <div id="coreContent">
            <div class="accountTitle1">Order Information</div>
            <table id="orderTable">
                <tr>
                    <th>订 单 号</th>
                    <th>下单时间</th>
                    <th>总 价</th>
                    <th>付款状态</th>
                    <th>发货状态</th>
                    <th>收货状态</th>
                    <th>操 作</th>
                </tr>
                <tr th:if="${#lists.isEmpty(orderList)}" >
                    <td colspan="7"><b>Your order information is empty.</b></td>
                </tr>
                <tr th:each="order:${orderList}">
                    <td class="">
                        <a th:href="@{/user/orderForm(orderId=${order.orderid})}" th:text="${order.orderid}">orderId</a>
                    </td>
                    <td th:text="${order.orderDate}">orderDate</td>
                    <td th:text="${order.totalprice}">totalprice</td>
                    <td th:text="${order.ispay ? '已付款':'未付款'}">ispay</td>
                    <td th:text="${order.issend ? '已发货':'未发货'}">issend</td>
                    <td th:text="${order.isget ? '已收货':'未收货'}">isget</td>
                    <td th:if="${order.isreturn}">
                        已退货
                    </td>
                    <td th:if="!${order.ispay}">
                        <a th:id="'goCancelOrder' + ${order.orderid}" th:onclick="cancelOrder([[${order.orderid}]]);" class="Button">取消订单</a>
                        <span th:id="'cancel' + ${order.orderid}" th:text="'取消成功'" style="display:none;"></span>
                    </td>
                    <td th:if="${order.ispay && !order.isreturn}">
                        <a th:id="'goCancel' + ${order.orderid}" th:if="!${order.isget}" th:onclick="returnOrder([[${order.orderid}]]);" class="Button">去退货</a>
                        <span th:if="${order.isget}">已完成</span>
                        <span th:id="${order.orderid}" th:text="'已退货'" style="display:none;"></span>
                    </td>
                </tr>
            </table>
        </div>
        </div>
    </div>

<div th:replace="common/bottom"></div>
</body>
<script src="../js/showOrder.js"></script>
<script>
    function returnOrder(orderid) {
        var el = document.getElementById('goCancel' + orderid);
        var newel = document.getElementById(orderid);
        $.ajax({
            type: 'POST',
            url: '/user/returnOrder?orderId=' + orderid,
            dataType:'json',
            success: function (data) {
                console.log(data);
                if (data.status === 1) {
                    var massage=data.message;
                    el.style.display = 'none';
                    newel.style.display = 'block';
                    console.log('okk');
                    alert(massage);
                } else {
                    var massage=data.message;
                    alert(massage);
                }
                    console.log("err");
                },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    }
    function cancelOrder(orderid) {
        var el = document.getElementById('goCancelOrder' + orderid);
        var newel = document.getElementById('cancel'+ orderid);
        $.ajax({
            type: 'POST',
            url: '/user/deleteOrder?orderId=' + orderid,
            dataType:'json',
            success: function (data) {
                console.log(data);
                if (data.status === 1) {
                    var massage=data.message;
                    el.style.display = 'none';
                    newel.style.display = 'block';
                    console.log('okk');
                    alert(massage);
                } else {
                    var massage=data.message;
                    alert(massage);
                }
                console.log("err");
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    }

</script>
</html>